<template>
    <el-card class="!border-none" shadow="never">
        <!-- 筛选栏 -->
        <el-tabs v-model="activeTab">
            <el-tab-pane
                v-for="(item, index) in tabsLists"
                :label="`${item.name}`"
                :name="item.label"
                :key="index"
                lazy

            />
        </el-tabs>

        <!-- 表格栏 -->
        <div class="mt-2">
            <el-button
                type="primary"
                v-perms="['setting:ai:models:add']"
                @click="emits('editor', activeTab, 'add', 0)"
            >
                <template #icon>
                    <icon name="el-icon-Plus" />
                </template>
                <span>新增模型</span>
            </el-button>

            <el-table :data="modelLists" size="large" class="mt-4">
                <el-table-column label="图标" min-width="80">
                    <template #default="{ row }">
                        <el-image :src="row.logo" class="w-[30px] h-[30px]" />
                    </template>
                </el-table-column>
                <el-table-column label="模型通道" prop="channel" min-width="120">
                    <template #default="{ row }">
                        <el-tag type="info">{{ row?.channel }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="渠道名称" prop="name" min-width="120" />
                <el-table-column label="子模型数" prop="models_num" min-width="80" />
                <el-table-column label="排序编号" prop="sort" min-width="80" />
                <el-table-column label="启用代理" prop="agency_api" min-width="80">
                    <template #default="{ row }">
                        <el-tag v-if="row.agency_api === 1" type="success">是</el-tag>
                        <el-tag v-else type="info">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="系统内置" prop="is_builtin" min-width="80">
                    <template #default="{ row }">
                        <el-tag v-if="row.is_builtin === 1" type="success">是</el-tag>
                        <el-tag v-else type="info">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="is_disable" min-width="80">
                    <template #default="{ row }">
                        <div
                            v-perms="['setting:ai:models:disable']"
                            @click="handleDisable(row.id, !row.is_disable)"
                            class="cursor-pointer"
                        >
                            <el-tag v-if="row.is_disable === 0">启用</el-tag>
                            <el-tag v-else type="danger">停用</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button
                            v-perms="['setting:ai:models:edit']"
                            type="primary"
                            link
                            @click="emits('editor', activeTab, 'edit', row.id)"
                        >
                            配置
                        </el-button>
                        <el-button
                            v-if="!row.is_builtin"
                            v-perms="['setting:ai:models:delete']"
                            type="danger"
                            link
                            @click="handleDelete(row.id)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import feedback from '@/utils/feedback'
import aiModelsApi from '@/api/setting/ai/models'

const emits = defineEmits(['editor'])
const props = defineProps({
    // 页面场景: [chat, vector]
    scene: {
        type: String,
        default: 'chat'
    }
})

// 选项标签
const activeTab = ref<string>(props.scene)
const tabsLists = reactive<any>([
    {
        name: '对话模型',
        label: 'chat',
        type: 'chat'
    },
    {
        name: '向量模型',
        label: 'vector',
        type: 'vector'
    },
    {
        name: '重排模型',
        label: 'ranking',
        type: 'ranking'
    }
])

// 模型列表
const modelLists = ref([])

/**
 * 查询模型
 *
 * @author zero
 */
const queryModels = async (): Promise<void> => {
    modelLists.value = await aiModelsApi.lists({
        scene: activeTab.value
    })
}

/**
 * 处理删除
 *
 * @param {number} id
 * @returns {Promise<void>}
 * @author zero
 */
const handleDelete = async (id: number): Promise<void> => {
    feedback.confirm('确定要删除此项数据吗?')
        .then(async () => {
            await aiModelsApi.delete(id)
            feedback.msgSuccess('删除成功')
            await queryModels()
        }).catch(() => {})
}

/**
 * 处理停用
 *
 * @param {number} id
 * @param {boolean} status
 */
const handleDisable = async (id: number, status: boolean) => {
    const message = status ? '您确定要停用该模型吗?' : '您确定要启用该模型吗?'
    const success = status ? '停用成功' : '启用成功'
    feedback.confirm(message)
        .then(async () => {
            await aiModelsApi.disable(id)
            feedback.msgSuccess(success)
            await queryModels()
        }).catch(() => {})
}

watch(
    () => activeTab.value,
    async () => {
        await queryModels()
    },
    { immediate: true }
)
</script>
